<template>
  <div class="container">
    <select v-model="tab" name="navi-tab" id="">
      <option value="0" default>HOME</option>
      <option value="1">ABOUT</option>
    </select>
    <div>{{ tab }}</div>
    <KeepAlive>
      <component :is="dynamic_components[tab]"></component>
    </KeepAlive>
  </div>
  <div class="container">
    <user-profile
      :user_name="user_name"
      :user_age="user_age"
      :changeNameCB="changeName"
      @updateAge="updateAge"
      @changeName="changeName"
    ></user-profile>
    <greet-text :user_age="user_age"></greet-text>
  </div>
  <hr />
  <div class="container">
    <info-form order="登录">
      <template v-slot:form_title> 用户登录 </template>
      <template v-slot:input_label="{ label_name, label_id }">
        <label :for="label_id">{{ label_name }}</label>
      </template>
      <template v-slot:form_attention>这是登录页面，若未注册，请先注册后再登录</template>
      <template v-slot:form_button>submit</template>
    </info-form>
  </div>
  <hr />
  <div class="container">
    <info-form order="注册">
      <template v-slot:form_title> 用户注册 </template>
      <template v-slot:input_label="{ label_name, label_id }">
        <label :for="label_id">{{ label_name }}</label>
      </template>
      <template v-slot:form_attention>这是注册页面，你需要先注册才能登录</template>
      <template v-slot:form_button>submit</template>
    </info-form>
  </div>
</template>

<script>
import greet from '@/components/Greeting.vue'
import profile from '@/components/User.vue'
import form from '@/components/Form.vue'
import home from '@/components/Home.vue'
import about from '@/components/About.vue'

export default {
  name: 'App',
  components: {
    'greet-text': greet,
    'user-profile': profile,
    'info-form': form,
    home,
    about
  },
  data() {
    return {
      user_name: 'Amily',
      user_age: 20,
      dynamic_components: [home, about],
      tab: 1
    }
  },
  methods: {
    updateAge(num) {
      this.user_age += num
    },
    changeName() {
      const nameArrs = [
        'Amily',
        'Elizabeth',
        'Henry',
        'Anne',
        'Victoria',
        'Jonston',
        'Joe',
        'Meyers',
        'Mark'
      ]
      const index = Math.floor(Math.random() * nameArrs.length)
      this.user_name = nameArrs[index]
    }
  }
}
</script>

<style scoped>
.container {
  margin: 0 auto;
  width: 50vw;
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  row-gap: 10px;
}
</style>
